<template>
	<view>
		<view v-if="showWeek" class="box-wrap" :style="{ '--wrap-width': width }">
			<view v-for="(item, weekIndex) in weekList" class="box week" :key="weekIndex">{{ item }}</view>
		</view>
		<view class="box-wrap"
			:style="{ '--wrap-width': width, '--empty-bg-color': emptyBgColor, '--fill-bg-color': fillBgColor , '--content-color': contentColor, '--content-font-size': contentFontSize}">
			<view v-for="(item, boxIndex) in list" class="box"
				:class="[item.type == 'empty' ? 'empty' : 'fill ' + 'fill-' + item.hot, item.date === todayDate && showToday ? ' stress' : '']" :key="boxIndex"
				@click="clickBox(boxIndex)">{{ showContent ? item.content : ''}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'bwinHotCalendar',
		/**
		 * 仿github贡献度热力图
		 * @property {String} width 组件宽度，注意H5只支持px
		 * @property {String} currentMonth 当前月份，传入后直接改变数据
		 * @property {String} emptyBgColor 上月末尾和下月初部分格子的背景色
		 * @property {String} fillBgColor 本月无数据格子背景色
		 * @property {Boolean} showContent 是否在格子里显示内容
		 * @property {String} contentColor 格子内容颜色
		 * @property {String} contentFontSize 格子内容字号
		 * @property {Boolean} showWeek 是否显示周名称
		 * @property {Boolean} showToday 是否着重显示今天
		 * @property {Array} dataList 热力数据
		 */
		props: {
			width: {
				type: String,
				default: '750rpx' // 小程序里用rpx，如果是在H5，则只支持px
			},
			currentMonth: {
				type: Number,
				default: new Date().getMonth() + 1 // 默认是当前月份
			},
			emptyBgColor: {
				type: String,
				default: '#c1c1c1' // 上月末尾和下月初部分格子的背景色
			},
			fillBgColor: {
				type: String,
				default: '#ebedf0' // 本月无数据格子背景色
			},
			showContent: {
				type: Boolean,
				default: false // 是否在格子中显示内容，需要显示的话dataList里要传入content
			},
			contentColor: {
				type: String,
				default: '#262626' // 格子内容的字体颜色
			},
			contentFontSize: {
				type: String,
				default: '28rpx' // 格子内容的字号
			},
			showWeek: {
				type: Boolean,
				default: true, // 是否显示周名称
			},
			showToday: {
				type: Boolean,
				default: false, // 是否着重显示今天
			},
			dataList: {
				type: Array,
				default () {
					// 如下
					// return [{
					// 	date: '2022-5-1',// 必传
					// 	hot: 'much', // 必传
					//  content: '1', // 选传
					// }]
					return [];
				}
			}
		},
		data() {
			return {
				weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			};
		},
		computed: {
			todayDate: function(){
				var today = new Date(); //获取当前时间
				var year = today.getFullYear(); //获取当前年份
				var month = this.currentMonth !== today.getMonth() + 1 ? this.currentMonth : today.getMonth() + 1; //获取当前月份
				var day = today.getDate(); //获取当前日
				return year + '-' + month + '-' + day;
			},
			list: function() {
				var list = [];
				var today = new Date(); //获取当前时间
				var year = today.getFullYear(); //获取当前年份
				var month = this.currentMonth !== today.getMonth() + 1 ? this.currentMonth : today.getMonth() + 1; //获取当前月份
				var day = today.getDate(); //获取当前日
				var currentMonthTotalDays = this.countMonthDays(month, year);
				var fistDate = new Date(year, month - 1, 1);
				var firstWeekDay = fistDate.getDay(); // 本月第一天是周几

				var lastDate = new Date(year, month - 1, currentMonthTotalDays);
				var lastWeekDay = lastDate.getDay(); // 本月最后一天是周几

				var lastMonthTotalDays = this.countMonthDays(month - 1, year);
				var i;
				// 填补开始的空白
				var length = firstWeekDay == 0 ? 7 - 1 : firstWeekDay - 1; // 空白格长度
				for (i = 0; i < length; i++) {
					list.push({
						index: i,
						type: 'empty',
						date: year + '-' + (firstWeekDay == 1 ? month : month - 1 === 0 ? 12 : month - 1) +
							'-' + (lastMonthTotalDays - length + 1 + i),
						hot: 'less'
					});
				}

				// 数据
				for (i = length; i < currentMonthTotalDays + length; i++) {
					list.push({
						index: i,
						type: 'fill',
						date: year + '-' + month + '-' + (i - length + 1),
						hot: 'less'
					});
				}

				// 填充结尾空白

				for (i = currentMonthTotalDays + length; i < currentMonthTotalDays + length + (lastWeekDay == 0 ? 0 :
						7 - lastWeekDay); i++) {
					list.push({
						index: i,
						type: 'empty',
						date: year + '-' + (lastWeekDay == 0 ? month : month + 1 === 13 ? 1 : month + 1) +
							'-' + (i - currentMonthTotalDays - length + 1),
						hot: 'less'
					});
				}

				for (i = 0; i < this.dataList.length; i++) {
					for (let m = 0; m < list.length; m++) {
						if (list[m]['date'] == this.dataList[i]['date']) {
							list[m]['hot'] = this.dataList[i]['hot'];
							if (this.showContent && this.dataList[i]['content'] !== undefined) {
								list[m]['content'] = this.dataList[i]['content'];
							}
							break;
						}
					}
				}

				return list;
			}
		},
		methods: {
			// 点击格子
			clickBox(index) {
				// 通过eventChannel向被打开页面传送数据
				this.$emit('click', {
					index: index,
					date: this.list[index]['date']
				});
			},
			// 计算每个月有多少天
			countMonthDays(month, year) {
				let totalDays = 0;
				if (month != 2) {
					if (month == 4 || month == 6 || month == 9 || month == 11)
						//判断月是30天还是31天,2月除外
						totalDays = 30;
					else totalDays = 31;
				} else {
					if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0)
						//判断是否是闰年，进行相应的改变
						totalDays = 29;
					else totalDays = 28;
				}
				return totalDays;
			}
		}
	};
</script>
<style lang="scss">
	.control-bar {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: var(--wrap-width);
		font-size: calc(var(--wrap-width) / 20);
		font-weight: bold;

		.pre,
		.next {
			font-weight: normal;
			font-size: calc(var(--wrap-width) / 25);
			background-color: #eee;
			border-radius: 4rpx;
			border: 1rpx solid $uni-border-color;
			padding: 4rpx 12rpx;
		}
	}

	.box-wrap {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		width: var(--wrap-width);

		.box {
			width: calc(var(--wrap-width) / 8.75);
			height: calc(var(--wrap-width) / 8.75);
			margin-right: calc(calc(var(--wrap-width) / 8.75) / 4);
			margin-bottom: calc(calc(var(--wrap-width) / 8.75) / 4);
			border-radius: calc(calc(var(--wrap-width) / 8.75) / 6);
			display: flex;
			align-items: center;
			justify-content: center;

			&::last-child {
				margin-right: 0;
			}
		}

		.week {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: calc(var(--wrap-width) / 20);
		}

		.empty {
			color: var(--content-color);
			font-size: var(--content-font-size);
			background-color: var(--empty-bg-color);
		}

		.fill {
			color: var(--content-color);
			font-size: var(--content-font-size);
			box-sizing: border-box;
			border: 1rpx solid rgba(27, 31, 35, 0.06);
			// background-color: var(--fill-bg-color);
		}

		.fill-less {
			background-color: var(--fill-bg-color);
		}

		.fill-little {
			background-color: #9be9a8;
		}

		.fill-some {
			background-color: #40c463;
		}

		.fill-many {
			background-color: #30a14e;
		}

		.fill-much {
			background-color: #216e39;
		}
		
		// 着重显示
		.stress {
			border: 1rpx solid rgba(27, 31, 35, 0.06);
		}
	}
</style>
